<!-- 提交订单-商品清单 -->
<template>

	<view v-show="showFlag" class="bg-Container">
		<view class="outer-Container">

			<!-- 弹窗标题 -->
			<view class="modalTitle">
				商品清单（共{{shopGoodsCount}}件）
			</view>

			<!-- 关闭弹窗 -->
			<image @click="closeModalHandler" :src="icon.closeModalBtn" class="closeModalBtn"></image>


			<!-- 购物车商品列表 -->
			<scroll-view scroll-y="true" class="shopGoods-ScrollView">
				<view class="all-store" v-for="(item, index) of shopCartData" :key="index">
					<view class="store-title">
						<view class="title-block">
							<!--							<view class="ourself" v-if="item.selfSupport">自营</view>-->
							<image lazy-load="true" :src="icon.shop" class="shopIcon"></image>
							<view class="store-name ellipsis1">{{ item.shopName }}</view>

							<!-- 选择发票 -->
							<view @click="gotoSelectInvoicePage(index)" class="selectInvoice-Container">
								<view v-if="item.invoiceInfo" class="unSelectText selectedText">
									{{item.invoiceInfo | cidTypeFormate}}
								</view>
								<view v-else class="unSelectText">
									不需要发票
								</view>
								<image class="selectInvoice" :src="icon.selectInvoice"></image>
							</view>
						</view>
					</view>

					<view class="shopGoodsList" v-for="(item2, index2) of item.shopCartGoodsForms" :key="index2">
						<view class="goodsBaseInfo">
							<image class="good-url" :src="imgSite + item2.coverPicture"></image>

							<view class="good-detail">
								<view class="name ellipsis2">

									<!-- 2：秒杀 5：砍价 6：拼团 -->
									<view class='goodsLabel seckill' v-if='item2.activityType == 2'>秒杀</view>
									<view class='goodsLabel bargain' v-if='item2.activityType == 5'>砍价</view>
									<view class='goodsLabel preGroup' v-if='item2.activityType == 6'>拼团预售</view>

									<text>{{ item2.goodName }}</text>
								</view>
								<view>
									<text class="size">{{ item2.goodsCategoryAttr }}</text>
								</view>

								<!-- 价格，积分，购买数量 -->
								<view class="number">
									<!-- 销售策略 10：现金 20：现金＋积分 40：积分 60:水券 70:水券 + 现金 -->
									<!-- v-if="item2.salesStrategy == 10"  -->
									<view class='price'>
										<!-- <text v-if="item2.showMemberFlag">¥{{ item2.memberPrice / 100 }}</text> -->
										<text>¥{{ item2.salesPrice / 100 }}</text>
									</view>
									<!-- <view v-if="item2.salesStrategy == 20" class='price'>
										<text v-if="item2.showMemberFlag">¥{{ item2.memberPrice / 100 }}</text>
										<text v-else>¥{{ item2.salesPrice / 100 }}</text>
										<text>+</text>
										<text>{{ item2.salesPoint }}</text>
										<text>积分</text>
									</view>
 									<view v-if="item2.salesStrategy == 40" class='price'>
										<text>{{ item2.salesPoint }}</text>
										<text>积分</text>
									</view>
									<view v-if="item2.salesStrategy == 60" class='price'>
										<text>{{ item2.waterCoupon / 100 }}</text>
										<text>水券</text>
									</view>
									<view v-if="item2.salesStrategy == 70" class='price'>
										<text v-if="item2.showMemberFlag">¥{{ item2.memberPrice / 100 }}</text>
										<text v-else>¥{{ item2.salesPrice / 100 }}</text>
										<text>+</text>
										<text>{{ item2.waterCoupon / 100 }}</text>
										<text>水券</text>
									</view>
									<view v-if="item2.salesStrategy == 100" class='price'>
										<text>¥{{ item2.salesPrice / 100 }}</text>
									</view> -->

									<!-- 操作数量 -->
									<view class="num">
										x{{item2.num}}
									</view>
								</view>
							</view>
						</view>

						<!-- 是否保税商品: 10-常规; 20-保税; -->
						<view class="bs-Container">
							<view v-if="item2.type == 20" class="bs_goods">保税商品</view>
						</view>


						<!-- 赠品信息 -->
						<view v-for="(item3, index) of item2.giftGoodList" :key="item3.id" class="gift">
							<view v-if="index == 0" class="left">赠品</view>
							<view v-else class="left" style="visibility: hidden;">赠品</view>
							<view @click="gotoDetail('', item3.goodsCd)" class="g-name ellipsis2">{{ item3.goodsBaseInfo | giftGoodFormat}}</view>
							<view class="g-num">x{{ item3.giftCount }}</view>
						</view>
					</view>


					<!-- 买家留言 -->
					<view class="message-Container">
						<view class="title">
							买家留言:
						</view>
						<input v-model="item.message" class="inputMsg" type="text" value="" />
					</view>
				</view>
			</scroll-view>
			<view class="column-div confirm-view">
				<view class="column-div confirm-but" @click="confirmEvent">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		filters: {

			//发票类型格式化
			cidTypeFormate: function(invoiceInfo) {

				var cidTypeName = "";
				if (invoiceInfo) {
					var cidType = invoiceInfo.cidType;

					switch (parseInt(cidType)) {
						case 1:
							cidTypeName = "普通纸质发票";
							break;
						case 2:
							cidTypeName = "普通电子发票";
							break;
						case 3:
							cidTypeName = "增值税纸质发票";
							break;
						case 4:
							cidTypeName = "增值税电子发票";
							break;
					}
				}

				return cidTypeName;
			},


			//赠品信息格式化
			giftGoodFormat(goodsBaseInfo) {
				var baseInfo = JSON.parse(goodsBaseInfo);
				return baseInfo['goodsName'];
			}
		},
		data() {
			return {
				icon: {
					selectInvoice: "/static/images/order/selectInvoice.png",
					closeModalBtn: "/static/images/common/closeModal.png",
					shop: '/static/images/cart/shop.png',
				}
			};
		},
		computed: {
			...mapState(['imgSite'])
		},
		props: {
			showFlag: {
				type: Boolean,
				default: false
			},
			shopGoodsCount: {
				type: Number,
				default: 0
			},
			shopCartData: {
				type: null,
				default: []
			}
		},
		beforeMount() {

			console.debug("this.shopCartData", this.shopCartData)
		},
		methods: {
confirmEvent () {
	this.$emit('closeModalHandler', this.shopCartData);
},
			// 显示会员价逻辑
			getShowMemberFlag(item) {
				if (item.customerLevelId &&
					(item.salesStrategy == 10 || item.salesStrategy == 20 || item.salesStrategy == 70) &&
					(item.memberName && item.memberPrice)) {

					return true;
				} else {
					return false;
				}
			},

			//关闭弹窗 
			closeModalHandler() {
				this.$emit('closeModalHandler');
			},


			//商品详情
			gotoDetail(activityType, id) {

				// 2：秒杀活动 5：砍价 6：拼团预售
				if (activityType) {
					if (activityType == 2) {
						uni.navigateTo({
							url: '/pages/detail/seckill?id=' + id
						});
					}
					if (activityType == 5) {
						uni.navigateTo({
							url: '/pages/detail/bargain?id=' + id
						});
					}
					if (activityType == 6) {
						uni.navigateTo({
							url: '/pages/detail/preGroup?id=' + id
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages/detail/detail?id=' + id
					});
				}
			},


			//选择发票
			gotoSelectInvoicePage(shopIndex) {

				var invoiceInfo = this.shopCartData[shopIndex];
				var invoiceType = [
					invoiceInfo.invoiceOrdPaperFlag,
					invoiceInfo.invoiceOrdElectronicFlag,
					invoiceInfo.invoiceVatPaperFlag,
					invoiceInfo.invoiceVatElectronicFlag
				];

				uni.navigateTo({
					url: "/pagesUser/invoice/select?shopIndex=" + shopIndex + '&invoiceType=' + JSON.stringify(invoiceType)
				});
			}
		}
	}
</script>

<style lang="less">
	.confirm-view {
		width: 100%;
		height: 167upx;
		background: #FFFFFF;
		box-shadow: 0px -5upx 9upx 0px rgba(177, 177, 177, 0.13);
	}

	.confirm-but {
		width: 600upx;
		height: 70upx;
		background: #FE5E49;
		border-radius: 35upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.bg-Container {
		z-index: 88;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);

		// 弹窗标题
		.modalTitle {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			width: 100%;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			// font-weight:bold;
			color: rgba(51, 51, 51, 1);
		}

		// 关闭按钮
		.closeModalBtn {
			z-index: 99999;
			position: absolute;
			top: 36rpx;
			right: 36rpx;
			width: 25rpx;
			height: 24rpx;
		}

		// 外层容器
		.outer-Container {
			z-index: 99999;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 926rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 26rpx 0px rgba(143, 143, 143, 0.14);
			border-radius: 16rpx 16rpx 0px 0px;

			// 确定按钮
			.sureBtnOuter-Container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 210rpx;

				.topLine {
					position: absolute;
					top: 0;
					width: 690rpx;
					height: 1rpx;
				}

				.borderOneRpx:after {
					border-color: rgba(238, 238, 238, 1);
				}

				.sureBtn-Container {
					width: 600rpx;
					height: 70rpx;
					background: #FE5E49;
					border-radius: 35rpx;

					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 70rpx;
				}
			}
		}


		// 店铺商品
		.shopGoods-ScrollView {
			width: 100%;
			height: 651rpx;

			.all-store {
				margin-top: 20rpx;
				padding-bottom: 10px;
				position: relative;
				z-index: 2;
				background-color: #fff;

				background: rgba(251, 251, 251, 1);
				box-shadow: 0px 4rpx 8rpx 0px rgba(172, 172, 172, 0.1);

				//店铺信息
				.store-title {
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					width: 100%;
					height: 88rpx;
					background: rgba(255, 243, 243, 1);
					border-radius: 1rpx;

					.title-block {
						display: flex;
						align-items: center;
						width: 100%;
					}

					.count-block {
						width: 15%;
					}

					.count-btn {
						width: 90rpx;
						height: 32rpx;
						border-radius: 20rpx;
						font-size: 21rpx;
						border: 2rpx solid #FE5E49;
						text-align: center;
						color: #FE5E49;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.ourself {
						background: #FE5E49;
						color: white;
						font-size: 20rpx;
						border-radius: 10upx;
						height: 30rpx;
						margin-left: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 60rpx;
					}

					.shopIcon {
						width: 28rpx;
						height: 27rpx;
					}

					.store-name {
						margin-left: 15rpx;
						max-width: 630rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						font-family: PingFang SC;
					}

					image:last-child {
						width: 11rpx;
						height: 18rpx;
						margin-left: 15rpx;
					}
				}


				// 商品列表
				.shopGoodsList {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					padding: 28rpx 0;

					.goodsBaseInfo {
						display: flex;
						align-items: center;
						margin: 0 auto;
						width: 690rpx;
						height: 160rpx;
					}

					.check {
						position: relative;
						bottom: 60rpx;
					}

					.good-url {
						height: 160rpx;
						width: 160rpx;
					}

					.good-detail {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 490rpx;
						height: 100%;
						margin-left: 40rpx;

						.name {
							font-size: 26rpx;
							font-family: PingFang SC;
							color: rgba(51, 51, 51, 1);
							line-height: 34rpx;
						}

						.size {
							// padding: 0 24rpx;
							height: 36rpx;
							line-height: 36rpx;
							// background:#FFFFFF;
							border-radius: 5rpx;
							font-size: 22rpx;
							color: rgba(102, 102, 102, 1);
							line-height: 40rpx;
						}

						.number {
							display: flex;
							height: 40rpx;
							align-items: center;

							.price {
								width: 50%;
								font-size: 28rpx;
								font-weight: bold;
								color: #333333;
							}

							.num {
								width: 50%;
								font-size: 26rpx;
								display: flex;
								flex-direction: row-reverse;
								align-items: center;
								font-weight: bold;
								height: 100%;
								color: #333333;
							}
						}
					}
				}

				// 保税商品
				.bs-Container {
					margin: 0 auto;
					margin-top: 4rpx;
					width: 690rpx;

					.bs_goods {
						margin-left: 62rpx;
						font-size: 20rpx;
						color: white;
						background: #FE5E49;
						width: 100rpx;
						height: 30rpx;
						text-align: center;
						border-radius: 15rpx;
					}
				}

				//赠品信息
				.gift {
					display: flex;
					width: 100%;
					margin-top: 30rpx;
					padding-left: 228rpx;
					padding-right: 28rpx;

					.left {
						font-size: 20rpx;
						font-weight: bold;
						color: #333333;
					}

					.g-name {
						margin-left: 10rpx;
						max-width: 380rpx;
						font-size: 20rpx;
						color: #666666;
					}

					.g-num {
						margin-left: auto;
						font-size: 20rpx;
						color: #333333;
					}
				}
			}
		}
	}


	// 买家留言
	.message-Container {
		display: flex;
		align-items: center;
		margin: 0 auto;
		width: 690rpx;
		height: 66rpx;
		line-height: 66rpx;
		background: rgba(251, 251, 251, 1);
		border: 1rpx solid rgba(219, 219, 219, 1);
		border-radius: 10rpx;

		.title {
			margin-left: 24rpx;
			font-size: 24rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 24rpx;
		}

		.inputMsg {
			margin-left: 10rpx;
			width: 540rpx;
			height: 24rpx;
			font-size: 24rpx;
			color: #333333;
			color: rgba(51, 51, 51, 1);
			line-height: 24rpx;
		}
	}

	//选择发票
	.selectInvoice-Container {
		display: flex;
		align-items: center;
		margin-left: auto;

		.unSelectText {
			font-size: 26rpx;
			color: #999999;
		}

		.selectedText {
			color: #FE5E49;
		}

		.selectInvoice {
			width: 10rpx;
			height: 16rpx;
		}
	}
</style>
